<template>
  <div>
    <div class="iconfont icon-gengduo c-fs28 c-fc-gray c-inlineblack" @click="operationBtn()"></div>
    <div class="c-ww144 c-pa c-lh64 c-textAlign-c c-br10 c-fs20 c-fc-sblack c-box-shadow2 c-p-t48 c-p-r0 c-bg-white c-pz1" v-show="operation">
      <div @click="removeMember(-5)">移出社群</div>
      <div @click="removeMember(-3)">加入黑名单</div>
      <div class="triangle c-p-l130"></div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: "LiveItem",
  props: {
    user: {
      type: Object,
      default: {
      }
    },
    socialRoomId: {
      type: String,
      default: '',
    },
    operation: {
      type: Boolean,
      default: false,
    },
    operaFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // operation: false
    };
  },
  watch: {
    operaFlag(val) {
      this.operation = false
    }
  },
  methods: {
    operationBtn() {
      let $this = this
      let showflag = !$this.operation
      $this.operation = !$this.operation
      if ($this.operation) {
        $this.$emit('operaFlagChange')
        setTimeout(function () {
          $this.operation = showflag
        }, 100)
      } else {
        $this.$emit('operaFlagChange')
      }
    },
    removeMember(status) {
      console.log(this.user)
      let $this = this
      $this.operation = false
      $this.$cjConfirm({
        title: '提示',
        titleCenter: true, //标题是否居中
        message: status == -5 ? '学员被移出社群后，可以通过详情页面购买后重新进入社群。确定要将 ' + $this.user.userName + ' 移出社群吗?'
        : '学员被加入黑名单将被移出社群，不能进群。确定将 ' + $this.user.userName + ' 加入黑名单吗?', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(
            global.apiurl + `social/removeMember/${$this.user.srmId}`, { "socialRoomId": $this.socialRoomId, "status": status },
            res => {
              //-3：被删除 -2: 禁言状态, 1为正常状态，2验证密码才能进入群
              let msg = status == -5 ? '移出社群成功' : '加入黑名单成功'
              $this.$showCjToast({
                text: msg,
                type: "success",
                time: 1000
              });
              $this.$emit('getMemberList')
            },
            failRes => {}
          );
        }, //确认事件回调
        onCancel: null, //取消事件回调
      })
    },
  }
};
</script>

<style scoped>
.triangle{
    position: absolute;
    top: -0.3rem;
    left:3.15rem;
    margin-right: 0.15rem;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
}
.triangle {
    border-width: 0.3rem;
    -webkit-filter: drop-shadow(0 -9px 5px rgba(0,0,0,0.2));
    filter: drop-shadow(0 -9px 5px rgba(0,0,0,0.2));
}
.triangle::after{
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  content: " ";
  border-width: 0.3rem;
  top: 1px;
  margin-left: -0.3rem;
  border-top-width: 0;
  border-bottom-color: #fff;
}
</style>
